<template>
  <div class='communityList'>
  	<div class="header-wrap">
			<span class="header-wrap-left"  @click="goback">
				<i class="iconback iconfont icon-fanhui"></i>
			</span>
			<span class="header-wrap-text">社区动态</span>
			<span class="header-wrap-right">
			</span>
  	</div>
    <div class="swiperOption-tontent" @click="gocommunityListDetails(list.id)" v-for="(list,index) in listData" :key="index">
      <!-- class="swiperOption-tontent" @click="goswiperlist(index)" -->
      <div class='communityList-img-box'>
        <img class="noticeSwiper-img" v-lazy="list.imgSrc" v-if="list.imgSrc" :src="list.imgSrc" alt="" >
        <img class="noticeSwiper-img" v-else src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594267483786&di=232665e4c3b5447fb1f7236d13ffc849&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2F2FB2OH2lUQCgD7WPaYQnmb47qO6hVB672wEthgvSZFTWq1545293646375compressflag.jpg" alt="">      </div>
      <div class="communityList-content">
        <div class="communityList-list">
          <span class="communityList-tittle">{{list.title}}</span>
          <span class="communityList-time">{{list.intro}}</span>
        </div>
      </div>
    </div>
    <Tips v-if="show"/>
  </div>
</template>
<script>
import Tips from '../../components/tips'
import api from '../../api/api.js'
  export default{
    data(){
      return{
        show:false,
				listData:[]
      }
    },
    created(){
      this.noticeList()
    },
    methods:{
		goback(){
      	this.$router.go(-1)
   	    },
        //信息动态列表
        noticeList(){
        this.$get(api.NoticeList,{
            params: {
                modular:'trend'
            }
        })
        .then((response) => {
		if(response.data.code==1){
                this.listData = response.data.data.list
          if(this.listData.length<=0){
            this.show = true
          }
				}
			})
			.catch((error) => {
					console.log(error);
			});  
			},
      gocommunityListDetails(id){
      this.$router.push({
        path: '/communityListDetails',
        query: {
          id
        }
      })
    },
      // goswiperlist(index){
      //   this.$router.push('/BusinessDetail')
      // }
    },
    components: {
      Tips
    }
  }
</script>
<style scoped>
.communityList{
  margin-top: 1rem;
  width: 100%;
  height: auto;
}
.swiper-container{
  padding-left:.5rem;
  width: 100%;
  height: 5rem;
}
.swiper-slide:nth-child(2n) {
  width: 40%;
}
.swiper-slide:nth-child(3n) {
  width: 20%;
}
.swiperOption-tontent:nth-child(1){
  border-top: 1px solid #ccc;
}
.swiperOption-tontent{
  display: flex;
  padding: .2rem .3rem;
  border-bottom: 1px solid #ccc;
}
.communityList-img-box{
  width: 1.5rem;
  height: 1rem;
}
.communityList-img{
  width: 100%;
  height: 100%;
}
.noticeSwiper-img{
  width: 100%;
  height: 100%;
}
.swiper-slide{
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .32rem;
  display: flex;
  margin: 0 .25rem 0 .5rem;
  color: #000;
  font-weight: bold;
  height: 1rem;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.communityList-content{
  font-size: .24rem;
  border-radius: 0 0 .2rem .2rem;
  width: 100%;
  height: 30%;
}
.communityList-list{
  margin-left: .28rem;
}
.communityList-tittle{
  display: block;
  padding: .1rem 0;
  height: .35rem;
  line-height: .35rem;
  color: #000;
  font-weight: bold;
  font-size: .28rem;
}
.communityList-time{
  display: block;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  color: #57c5c6;
}
</style>